<template>
  <div class="container mt-5">
    <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">个人信息</h5>
        <h6 class="card-subtitle mb-2 text-muted">谢某某的资料</h6>
        <p class="card-text">姓名：{{ people.name }}</p>
        <p class="card-text">年龄：{{ people.age }}</p>
        <button class="btn btn-primary" @click="changePeople">成长</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
const people = reactive({name: "谢某某", age: 20});
const changePeople = () => {
  people.age += 10;
  let message: string;
  switch (people.age) {
    case 30:
      message = "大丈夫岂能郁郁久居忍下";
      break;
    case 40:
      message = "修身齐家治国平天下";
      break;
    case 50:
      message = "已知天命矣";
      break;
    case 60:
      message = "甲子岁月转眼即逝啊";
      break;
    case 70:
      message = "人生自古谁无死啊";
      break;
    default:
      message = "";
      break;
  }
  if (message) {
    alert(message);
  }
};
</script>

<style>
/* Bootstrap已经提供了足够的样式，所以这里不需要额外的CSS */
</style>
